<template>
  <el-container style="height: 100%;background-color:#edf2fa ">
    <el-header style="margin:13px;border-radius: 5px;background-color: white">
      <el-row style="padding-top: 13px">
        <el-col :span="8" style="display: flex;align-content: center">
          <el-date-picker
              type="datetimerange"
              v-model="currentTime"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
          <el-button icon="el-icon-search" circle type="primary" style="margin-left: 13px"
                     @click="searchHistory"></el-button>
          <el-button icon="el-icon-refresh" circle style="margin-left: 13px" @click="cancelSearch"></el-button>
          <el-button icon="el-icon-download" plain circle type="primary" style="margin-left: 13px"
                     @click="exportFactors"></el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main style="padding:  13px;">
      <el-card>
        <el-table
            :data="dataList" max-height="700" style="flex: none;width: 100%"
        >
          <el-table-column
              prop="factorId"
              label="编号"
              sortable
          >
          </el-table-column>
          <el-table-column
              prop="stationName"
              label="来源站点"
              sortable
          >
          </el-table-column>
          <el-table-column
              prop="sid"
              label="站点编号"
              sortable
          >
          </el-table-column>

          <el-table-column
              prop="tem"
              label="站点温度"
              sortable
          >
          </el-table-column>
          <el-table-column
              prop="v50029"
              label="站点降水"
              sortable
          >
          </el-table-column>
          <el-table-column
              prop="prs"
              label="站点气压"
              sortable
          >
          </el-table-column>
          <el-table-column
              prop="rhu"
              label="站点湿度"
              sortable
          >
          </el-table-column>
          <el-table-column
              prop="win_D_Avg_2mi"
              label="站点风向"
              sortable
          >
          </el-table-column>
          <el-table-column
              prop="win_S_Avg_2mi"
              label="站点风速"
              sortable
          >
          </el-table-column>
          <el-table-column
              prop="stationLevel"
              label="站点等级"
              sortable
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.stationLevel === 1" type="success">国家站点</el-tag>
              <el-tag v-else type="warning">其他类型</el-tag>
            </template>

          </el-table-column>
          <el-table-column
              prop="createTime"
              label="获取时间"
              width="200"
              sortable
          ></el-table-column>
        </el-table>

      </el-card>
    </el-main>
    <el-footer style="text-align: center">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.pageNum"
          :page-sizes="[10,20,30,40,50,100]"
          :page-size="query.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-footer>
  </el-container>
</template>

<script>
import {getList, exportExcelFactor} from "@/api/java/factor";
import moment from "moment";

export default {
  name: "stationData",
  data() {
    return {
      dataList: [],
      query: {
        pageNum: 1,
        pageSize: 10,
        startTime: null,
        endTime: null
      },
      total: null,
      currentTime: null,
    }
  },
  mounted() {
    this.getData()
  },

  methods: {
    exportFactors() {
      exportExcelFactor(this.query).then(res => {
        this.$message.success("导出成功，路径为" + res.data)
      })

    },
    cancelSearch() {
      this.currentTime = null
      this.reSetForm()
      this.getData()
    },
    searchHistory() {
      if (this.currentTime === null) {
        this.$message.error("请选择时间范围")
      } else {
        const startTime = moment(this.currentTime[0]).format('YYYYMMDDHHmm')
        const endTime = moment(this.currentTime[1]).format('YYYYMMDDHHmm')
        this.query.startTime = startTime
        this.query.endTime = endTime
        this.getData()
      }
    },
    reSetForm() {
      this.query.pageSize = 15
      this.query.pageNum = 1
      this.query.startTime = null
      this.query.endTime = null
    },
    handleSizeChange(val) {
      this.query.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.query.pageNum = val
      this.getData()
    },
    getData() {
      getList(this.query).then(res => {
        this.dataList = res.data.records
        this.total = res.data.total
      })
    }
  }
}
</script>

<style scoped>

</style>